<template>
  <div class="main-wrapper">
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        placeholder="名称"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-select
        v-model="listQuery.status"
        placeholder="状态"
        clearable
        class="filter-item"
      >
        <el-option
          v-for="item in statusOptions"
          :key="item.key"
          :label="item.statusName"
          :value="item.key"
        />
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        >查询</el-button
      >
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
    >
      <!-- <el-table-column label="主键ID" align="center">
        <template slot-scope="{row}">
          {{ row.id }}
        </template>
      </el-table-column> -->
      <el-table-column label="用户ID" align="center">
        <template slot-scope="{ row }">
          {{ row.userId }}
        </template>
      </el-table-column>
      <el-table-column label="用户名" align="center">
        <template slot-scope="{ row }">
          {{ row.userName }}
        </template>
      </el-table-column>
      <el-table-column label="锁定资金" align="center">
        <template slot-scope="{ row }">
          {{ row.lockedMoney | amountFilter }}
        </template>
      </el-table-column>
      <el-table-column label="可提现资金" align="center">
        <template slot-scope="{ row }">
          {{ row.money | amountFilter }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="时间" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.upDatetime | timeFilter('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column> -->
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button size="mini" type="success" @click="handleDetail(row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="fetchUserMoneyLogList"
    />

    <el-dialog :visible.sync="dialogDetailVisible" width="950px" custom-class="detail-dialog">
      <el-table
        v-loading="detailLoading"
        :data="userMoneyLogData"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="金额(元)" align="center" width="120px">
          <template slot-scope="{ row }">
            {{ row.money | amountFilter('', 2) }}
          </template>
        </el-table-column>
        <el-table-column label="提成来源" align="center" width="120px">
          <template slot-scope="{ row }">
            {{ row.projectTypeName }}
          </template>
        </el-table-column>
        <el-table-column label="来源ID" align="center" width="80px">
          <template slot-scope="{ row }">
            {{ row.projectId }}
          </template>
        </el-table-column>
        <el-table-column label="来源层级" align="center" width="80px">
          <template slot-scope="{ row }">
            {{ 'L' + row.fromLevel }}
          </template>
        </el-table-column>
        <el-table-column label="提成比例" align="center" width="80px">
          <template slot-scope="{ row }">
            {{ (row.proportion * 100) | amountFilter( '%', 2) }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="项目类型" align="center">
        <template slot-scope="{row}">
          {{ row.projectType }}
        </template>
      </el-table-column> -->
        <el-table-column label="创建日期" align="center" width="160px">
          <template slot-scope="{ row }">
            <span>{{ row.createTime | timeFilter('{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目进度" align="center" width="80px">
          <template slot-scope="{ row }">
            {{ statusMap[row.status].title }}
          </template>
        </el-table-column>
        <el-table-column label="结算日期" align="center" min-width="160px">
          <template slot-scope="{ row }">
            <span>{{ row.updateTime | timeFilter('{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getUserMoneyLogList, getUserMoney } from '@/api/UserMoneyLog'
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'

export default {
  name: 'UserMoneyLog',
  components: {
    Pagination
  },
  filters: {
    styleFilter(style) {
      const styleMap = { 1: 'success', 0: 'danger' }
      return styleMap[style]
    },
    timeFilter(time, format) {
      return parseTime(time, format)
    },
    statusFilter(value) {
      const statusMap = { 0: '无效', 1: '有效' }
      return statusMap[value]
    },
    amountFilter(value, currency = '元', decimals = 0) {
      const digitsRE = /(\d{3})(?=\d)/g
      value = parseFloat(value)
      if (!value && value !== 0) return '-'
      const stringified = Math.abs(value).toFixed(decimals)
      const $int = decimals ? stringified.slice(0, -1 - decimals) : stringified
      const i = $int.length % 3
      const head = i > 0 ? $int.slice(0, i) + ($int.length > 3 ? ',' : '') : ''
      const $float = decimals ? stringified.slice(-1 - decimals) : ''
      const sign = value < 0 ? '-' : ''
      return `${sign}${head}${$int
        .slice(i)
        .replace(digitsRE, '$1,')}${$float} ${currency}`
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      detailLoading: false,
      listQuery: {
        pageNo: 1,
        pageSize: 20
      },
      statusOptions: [
        { key: 0, statusName: '无效' },
        { key: 1, statusName: '有效' }
      ],
      statusMap: {
        1: { title: '已结算' },
        0: { title: '进行中' }
      },
      userMoneyLogData: [],
      dialogFormVisible: false,
      dialogDetailVisible: false,
      dialogStatus: ''
    }
  },
  created() {
    this.fetchUserMoneyLogList()
  },
  methods: {
    fetchUserMoneyLogList() {
      this.listLoading = true
      getUserMoneyLogList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.fetchUserMoneyLogList()
    },
    handleDetail(row) {
      this.detailLoading = true
      getUserMoney(row.userId).then(res => {
        this.userMoneyLogData = res.data
        this.detailLoading = false
      })
      this.dialogDetailVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.main-wrapper {
  margin: 8px;
  .filter-container {
    padding: 10px 0;
    .filter-item {
      width: 200px;
      margin-right: 10px;
    }
  }
  ::v-deep .detail-dialog{
    max-height: 80%;
    overflow-y: scroll;
  }
}
</style>
